<template>
  <a-modal
    title="内部评价计划-新增"
    :visible="visible"
    ok-text='确定'
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form-model ref='form' :model='queryParam' :rules='validatorRules'>
      <a-form-model-item label='计划编号' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='planNo'>
        <a-input placeholder="请输入计划编号" v-model='queryParam.planNo'></a-input>
      </a-form-model-item>
      <a-form-model-item label='计划名称' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='planName'>
        <a-input placeholder="请输入计划名称" v-model='queryParam.planName'></a-input>
      </a-form-model-item>
      <a-form-model-item label='计划类型' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='planType'>
        <j-dict-select-tag style='width: 100%' v-model="queryParam.planType" placeholder="请选择" dict-code="inconplantype"/>
      </a-form-model-item>
      <a-form-model-item label='年份' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='year'>
        <a-date-picker
          mode="year"
          placeholder="请选择年份"
          format='YYYY'
          value-format="yyyy-MM-dd"
          v-model='queryParam.year'
          :open='yearPickShow'
          style='width: 100%'
          @panelChange="handlePanelChange"
          @openChange="handleOpenChange"/>
      </a-form-model-item>
      <a-form-model-item label='年度计划附件' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='fileNameList'>
        <NKUpload ref="fileUpload" :fileid="'file'" @uploadFile :saveFileList.sync='queryParam.fileNameList'></NKUpload>
      </a-form-model-item>
      <a-form-model-item label='评价范围' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='evaluateRange'>
        <a-textarea placeholder="请输入评价范围" v-model='queryParam.evaluateRange'></a-textarea>
      </a-form-model-item>
      <a-form-model-item label='工作任务' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='workTask'>
        <a-textarea placeholder="请输入工作任务" v-model='queryParam.workTask'></a-textarea>
      </a-form-model-item>
      <a-form-model-item label='人员组织' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='peopleOrg'>
        <a-textarea placeholder="请输入人员组织" v-model='queryParam.peopleOrg'></a-textarea>

      </a-form-model-item>

      <a-form-model-item label='进度安排' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='schedule'>
        <a-textarea placeholder="请输入进度安排" v-model='queryParam.schedule'></a-textarea>

      </a-form-model-item>
      <a-form-model-item label='审批人' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='approveUser'>
        <a-select
          show-search
          placeholder="请选择"
          option-filter-prop="children"
          style="width: 200px"
          title='请选择审批人'
          v-model='queryParam.approveUser'
        >
          <a-select-option v-for='(item,index) in approverList' :key='item.id' :value="item.id">
            {{item.realname}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
  import NKUpload from '../../../components/NKUpload'
  export default {
    name: 'UserModal',
    components: { NKUpload },
    data() {
      return {
        queryParam: {
          planNo:'',
          planName:'',
          planType:'',
          year: '',
          fileNameList: [],
          evaluateRange:'',
          workTask:'',
          peopleOrg:'',
          schedule:'',
          approveUser:'',
        },
        yearPickShow: false,
        visible: false,
        validatorRules: {
          year: [{required: true, message: '请选择年度!'}],
          quarter: [{required: true, message: '请输入季度!'}]
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        approverList:'',
        url: {
          getApprover:'/sys/user/queryAuditInfoByOrgCode',
        },
      }
    },
    created() {
      getAction(this.url.getApprover).then((res) => { //获取审核人列表
        if (res.success && res.result) {
          this.approverList = res.result
        } else {
          console.log(res)
        }
      }).finally(() => {
      })

    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.visible = false
            this.$emit('openModelView', this.queryParam)
            this.queryParam = {
              year:''
            }
          } else {
            return false
          }
        })
      },
      handleCancel(e) {
        this.queryParam = {
          year:''
        }
        this.visible = false;
      },
      moment,
      // 得到年份选择器的值
      handlePanelChange(value) {
        this.queryParam.year = moment(value).format('YYYY')
        this.yearPickShow = false
        this.$refs.form.validateField('year', (error) => {
          console.log(error)
        })
      },
      // 弹出日历和关闭日历的回调
      handleOpenChange(status) {
        this.yearPickShow = status
      },
    }
  }
</script>

<style scoped>

</style>
